import {
	ControlledConnectModalExample,
	UncontrolledConnectModalExample,
} from '../../../examples/wallet-components';

# ConnectModal

The `ConnectModal` component opens a modal that guides the user through connecting their wallet to
the dApp.

## Controlled example

```tsx
import { ConnectModal, useCurrentAccount } from '@mysten/dapp-kit';
import { useState } from 'react';

export function YourApp() {
	const currentAccount = useCurrentAccount();
	const [open, setOpen] = useState(false);

	return (
		<ConnectModal
			trigger={
				<button disabled={!!currentAccount}> {currentAccount ? 'Connected' : 'Connect'}</button>
			}
			open={open}
			onOpenChange={(isOpen) => setOpen(isOpen)}
		/>
	);
}
```

Click **Connect** to connect your wallet and see the previous code in action:

<ControlledConnectModalExample />

## Uncontrolled example

```tsx
import { ConnectModal, useCurrentAccount } from '@mysten/dapp-kit';

export function YourApp() {
	const currentAccount = useCurrentAccount();

	return (
		<ConnectModal
			trigger={
				<button disabled={!!currentAccount}> {currentAccount ? 'Connected' : 'Connect'}</button>
			}
		/>
	);
}
```

Click **Connect** to connect your wallet and see the previous code in action:

<UncontrolledConnectModalExample />

## Controlled props

- `open` - The controlled open state of the dialog.
- `onOpenChange` - Event handler called when the open state of the dialog changes.
- `trigger` - The trigger button that opens the dialog.

## Uncontrolled props

- `defaultOpen` - The open state of the dialog when it is initially rendered. Use when you do not
  need to control its open state.
- `trigger` - The trigger button that opens the dialog.
